<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>淘宝选女友</title>
  <style>
    * {
      margin: 0;
      padding: 0
    }

    ul,
    ol {
      list-style: none
    }

    h3 {
      height: 40px
    }

    button:disabled {
      cursor: not-allowed;
    }

    .shopping {
      width: 570px;
      margin: 100px auto;
      padding: 20px;
      border: 1px solid #ccc;
      position: relative;
      overflow: hidden;
    }

    .shopping .left {
      float: left;
    }

    .shopping .right {
      float: right;
    }

    .shopping .girlImg {
      position: relative;
      width: 200px;
      height: 200px;
    }

    .shopping .girlImg img {
      width: 100%;
      height: 100%;
      position: absolute;
    }

    .shopping .girlImg span {
      display: none;
      width: 100px;
      height: 100px;
      position: absolute;
      left: 0;
      top: 0;
      cursor: move;
      background: rgba(255, 255, 0, 0.3)
    }

    .imgList {
      width: 220px;
      margin-top: 20px;
    }

    .imgList li {
      float: left;
      margin-right: 8px;
      border: 2px solid transparent
    }

    .imgList .ac {
      border: 2px solid red
    }

    .imgList li img {
      width: 40px;
      display: block
    }

    .price {
      height: 50px;
      font-size: 30px;
      color: red;
      font-weight: bold
    }

    .priceList {
      overflow: hidden;
      margin: 20px 0
    }

    .priceList li {
      float: left;
      height: 30px;
      line-height: 30px;
      padding: 0 10px;
      border: 2px solid #999;
      margin-right: 10px;
      cursor: pointer
    }

    .priceList li.ac {
      border: 2px solid red
    }

    .changeNum {
      position: relative;
      margin: 20px 0
    }

    .changeNum input {
      width: 40px;
      height: 41px;
      text-align: center;
      line-height: 40px;
      border: 1px solid #ccc;
    }

    .changeNum button {
      height: 22px;
      width: 20px;
      background: none;
      border: 1px solid #ccc;
      position: absolute;
    }

    .changeNum .addBtn {
      left: 41px;
      top: 0px;
    }

    .changeNum .subBtn {
      left: 41px;
      top: 21px;
    }

    .okBtn {
      height: 30px;
      width: 100px
    }

    .bigBox {
      position: absolute;
      width: 200px;
      height: 200px;
      left: 230px;
      display: none;
      overflow: hidden;
    }

    .bigBox img {
      position: absolute;
    }

    .shopCart {
      position: fixed;
      right: 0;
      top: 200px;
      color: red;
    }

    .shopNum {
      width: 60px;
      height: 25px;
      background: deeppink;
      color: black;
      text-align: center;
      line-height: 25px;
    }

    .active {
      width: 25px;
      height: 25px;
      background: skyblue;
      position: absolute;
    }
  </style>
  <script src="util.js"></script>
</head>

<body>
  <div class="shopping" id="shopping">
    <div class="left">
      <div class="girlImg" id="box">
        <img id="girl" src="4.jpg">
        <span></span>
      </div>
      <ol id="imgList" class="imgList">
        <li><img src="0.jpg"></li>
        <li><img src="1.jpg"></li>
        <li><img src="2.jpg"></li>
        <li><img src="3.jpg"></li>
      </ol>
    </div>
    <div class="right">
      <h3>淘宝选女友---不要998,女友带回家!!</h3>
      <div id="price" class="price"><em>480-99988</em> 元</div>
      <ul id="priceList" class="priceList">
        <li>标准版</li>
        <li>升级版</li>
        <li>豪华版</li>
        <li>定制版</li>
      </ul>
      <div id="changeNum" class="changeNum">
        <input type="text" value="1">
        <button class="addBtn" type="button">+</button>
        <button class="subBtn" type="button" disabled>-</button>
      </div>
      <button id="okBtn" class="okBtn" type="button" disabled>加入购物车</button>
    </div>
    <div id="bigBox" class="bigBox"><img src="4.jpg" alt=""></div>
  </div>
  <div id="shopCart" class="shopCart">
    购物车
    <p id="shopNum" class="shopNum">0</p>
  </div>
</body>
<script>
  // 在所有内容加载完成后执行
  window.onload = function () {
    // 1、放大镜
    class Zoom {
      // 构造函数
      constructor() {
        this.shopping = document.querySelector('#shopping')
        this.box = document.querySelector('#box')
        this.bigBox = document.querySelector('#bigBox')
        this.span = document.querySelector('#box span')
        this.img = document.querySelector('#bigBox img')
        this.bindEvents()
      }
      // 绑定事件
      bindEvents() {
        // 将enter和move两个事件合并成一个，在move的时候让span和bigBox显示
        this.box.onmousemove = e => {
          this.bigBox.style.display = 'block'
          this.span.style.display = 'block'
          let top = e.clientY - this.shopping.offsetTop - this.box.offsetTop - this.span.offsetHeight / 2
          let left = e.clientX - this.shopping.offsetLeft - this.box.offsetLeft - this.span.offsetWidth / 2
          this.move(left, top)
        }
        // 鼠标离开box时span和bigBox消失
        this.box.onmouseleave = e => {
          this.bigBox.style.display = 'none'
          this.span.style.display = 'none'
        }
      }
      // 让span跟着鼠标移动
      move(left, top) {
        if (left < 0) left = 0
        if (left > this.box.offsetWidth - this.span.offsetWidth) left = this.box.offsetWidth - this.span.offsetWidth
        if (top < 0) top = 0
        if (top > this.box.offsetHeight - this.span.offsetHeight) top = this.box.offsetHeight - this.span.offsetHeight
        this.span.style.top = top + 'px'
        this.span.style.left = left + 'px'

        // 图片按比例移动
        this.img.style.left = -4 * left + 'px'
        this.img.style.top = -4 * top + 'px'
      }
    }
    new Zoom()

    // 2、点击按钮改变边框颜色，价格，图片
    var priceList = document.querySelector('#priceList')
    var lis = priceList.querySelectorAll('li')
    var price = document.querySelector('#price')
    var em = price.querySelector('em')
    var imgList = document.querySelectorAll('#imgList li')
    var box = document.querySelector('#box')
    var index = 0// 获取按钮li下标
    var lastIndex = 0 // 获取上一个按钮下标

    // 封装一个函数，可以点击小图，也可以点击右边按钮，改变小图边框、大图图片、按钮边框及价格样式
    function change(item) {
      lastIndex = index
      index = item
      lis[lastIndex].className = ''
      lis[index].className = 'ac'
      imgList[lastIndex].className = ''
      imgList[index].className = 'ac'

      switch (item) {
        case 0:
          em.innerHTML = '480'
          box.firstElementChild.src = "0.jpg"
          bigBox.firstElementChild.src = "0.jpg"
          break

        case 1:
          em.innerHTML = '1860'
          box.firstElementChild.src = "1.jpg"
          bigBox.firstElementChild.src = "1.jpg"
          break

        case 2:
          em.innerHTML = '5880'
          box.firstElementChild.src = "2.jpg"
          bigBox.firstElementChild.src = "2.jpg"
          break

        case 3:
          em.innerHTML = '99988'
          box.firstElementChild.src = "3.jpg"
          bigBox.firstElementChild.src = "3.jpg"
          break
      }
    }
    // 点击小图，改变小图边框、大图图片、按钮边框及价格样式
    Array.from(imgList).forEach(function (small, item) {
      small.onclick = function () {
        change(item)
      }
    })
    // 点击右边按钮，改变小图边框、大图图片、按钮边框及价格样式
    Array.from(lis).forEach(function (btn, item) {
      btn.onclick = function () {
        change(item)
         /* 3、将这一部分功能放在点击按钮之后
              因为选中商品后才能添加到购物车，商品数量才有加减 */
        // 数字加减和添加到购物车
        var changeNum = document.querySelector('#changeNum')
        var input = changeNum.querySelector('input')
        var addBtn = changeNum.querySelector('.addBtn')
        var subBtn = changeNum.querySelector('.subBtn')
        var num = parseInt(input.value)
        var okBtn = document.querySelector('#okBtn')
        var shopCart = document.querySelector('#shopCart')
        var shopNum = document.querySelector('#shopNum')

        // 点击加号加数字
        addBtn.onclick = function () {
          num += 1
          input.value = num
          if (num == 4) {
            addBtn.setAttribute('disabled', 'disabled')
          } else if (num > 1) {
            subBtn.removeAttribute('disabled')
            okBtn.removeAttribute('disabled')
          }
        }
        // 点击减号减数字
        subBtn.onclick = function () {
          num -= 1
          input.value = num
          if (num < 4) {
            addBtn.removeAttribute('disabled')
          }
          if (num == 1) {
            subBtn.setAttribute('disabled', 'true')
          }
        }
        // 加入购物车时的抛物线样式
        okBtn.onclick = function (e) {
          //  获取三个坐标点画抛物线 
          // 起点 添加购物车的按钮位置
          var x1 = e.clientX,
            y1 = e.clientY,
            // 终点 购物车位置
            x2 = shopCart.offsetLeft,
            y2 = shopCart.offsetTop,
            // 顶点 最高点 手动设置
            x3 = window.innerWidth - 200,
            y3 = 100
          // 根据公式计算抛物线系数
          var a = -((y2 - y3) * x1 - (x2 - x3) * y1 + x2 * y3 - x3 * y2) / ((x2 - x3) * (x1 - x2) * (x1 - x3))
          var b = ((y2 - y3) * x1 * x1 + x2 * x2 * y3 - x3 * x3 * y2 - (x2 * x2 - x3 * x3) * y1) / ((x2 - x3) * (x1 - x2) * (x1 - x3));
          var c = ((x2 * y3 - x3 * y2) * x1 * x1 - (x2 * x2 * y3 - x3 * x3 * y2) * x1 + (x2 * x2 * x3 - x2 * x3 * x3) * y1) / ((x2 - x3) * (x1 - x2) * (x1 - x3));
          // 抛物线起点
          var left = x1
          // 创建一个沿抛物线轨迹运动的元素
          var div = document.createElement('div')
          div.className = 'active'
          div.style.left = x1 + 'px'
          div.style.top = y1 + 'px'
          document.body.appendChild(div)
          var timer = setInterval(() => {
            left += 5
            var top = a * left * left + b * left + c
            div.style.left = left + 'px'
            div.style.top = top + 'px'
            // 判断终点的位置
            if (left > x2) {
              clearInterval(timer)
              div.remove()
              // 购物车添加的数量增加
              shopNum.innerHTML = parseInt(shopNum.innerHTML) + num
            }
          }, 20)

        }

      }
    })
  }

</script>

</html>